<template>
    <div :id="id"></div>
</template>

<script>
import echarts from 'echarts';

export default {
    name: 'plato-chart',
    props: ['id', 'data'],
    methods: {
        drawCharts() {
            let my_chart = echarts.init(document.getElementById(this.id));
            let option = {
                grid: {
                    left: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function(params) {
                        return params[0].name + '<br/>' +
                            '总数' + ' : ' + params[0].value + '<br/>' +
                            '所占百分比' + ' : ' + (params[1].value + params[0].value);
                    }
                },
                legend: {
                    selectedMode: false,
                    // data: ['Acutal', 'Forecast']
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    data: this.data.x,
                    splitLine:false
                    //data:[]
                },{
                    type: 'category',
                    show:false,
                    boundaryGap : false,
                    // data: ['百分比', '百分比', '百分比', '百分比', '百分比', '百分比',"百分比"],
                    splitLine:false
                }],
                yAxis: [{
                        type: 'value',
                        boundaryGap: [0, 0.1],
                        splitLine:false
                    },
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        splitLine:false
                    }
                ],
                series: [{
                    name: '数量',
                        type: 'bar',
                        barCategoryGap: '0%',
                        itemStyle: {
                            normal: {
                                color: (obj) =>{
                                	if(obj.dataIndex>=0){
                                		return this.data.color[obj.dataIndex];
                                	}
                                },
                                label: {
                                    show: true,
                                    position: 'insideTop'
                                }
                            }
                        },
                        data: this.data.data
                    },
                    {   
                        name: '百分比',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: [0, 34.78, 60.87, 78.26, 86.96, 92.17, 97.39, 100]
                    }

                ]
            };
            my_chart.setOption(option);
        }
    },
    mounted() {
        this.drawCharts();
    }
}
</script>

<style>
</style>
